<template>
	<transition name='popup-bottom'>
		<div v-show="isShow" class="chat-page-container">
			<nav-header style='z-index: 1020;'>
				<mt-cell slot='left' @click.native="_hidden"icon='back' title='关闭' class=""></mt-cell>
			</nav-header>
			<load-more class="chat-page" :isShow="isShow" :data="msgData.data">
				<chat-type v-for="item in msgData.data" :msgDataItem="item" :key="item.sid"></chat-type>
			</load-more>
			<div class="chat-foot">
				<img src="@/../static/img/addphoto.svg" alt="" @click="chooseImageEvent" />
				<textarea name="" class="chat-input-box" placeholder="请告诉我们您的问题" v-model="text"></textarea>
				<span class="chat-send-btn" @click="sendMsg">发送</span>
			</div>
			<choose-image ref='chooseImage' :chooseImage="chooseImage"></choose-image>
		</div>
	</transition>
</template>

<script>
	
	import { mapGetters, mapState, mapActions } from 'vuex';
	import ChatType from '@/components/chat-type/chat-type'
	import NavHeader from '@/components/header/header'
	import chooseImage from '@/components/choose-image/choose-image'
	import loadMore from '@/base/load-more/load-more'
	import {getVersionsUrl} from '@/common-func/common-func' 
	const baseUrl = require('@/config/config').baseUrl
	
	export default {
		name: 'chatPopup',
		props: {
			getMsgType: {
				type: String,
				require: true,
			},
		
		},
		data() {
			return {
				text: '',
				isShow: false
			}
		},
		computed: {
			...mapState(['msgData','goodsDetails', 'userInfo'])
		},
		methods: {
			...mapActions(['sendMsgAsyn','getMsgDataAsyn']),
			_show() {
				this.isShow = true; 
			},
			chooseImage(evt) {
				var options = {
					method: 'POST',
					
				}
				

				var task =  plus
								.uploader
								.createUpload( 
									baseUrl + getVersionsUrl("/index/chat/upload"),
									options, 
									this.uploadCompletedCB
								);
				task.addFile(evt[0].filePath,{key: 'file'});
				// addData 相当于添加 formData 可多次添加
				task.addData('is_mag',"22");
				task.addData('member_id', this.userInfo.member_id + '');
				task.addData('getMsgType', this.getMsgType);

				if(this.getMsgType == "goods") {
					task.addData('order_label', this.goodsDetails.goods_label + '');
					task.addData('goods_id', this.goodsDetails.goods_id + '');
					task.addData('ser_id', this.goodsDetails.ser_id + '');
				} else if(this.getMsgType == 'order'){
					// 以下需要修改 根据具体需求更改字段，值必须是字符串，不能为数字，对象等
					task.addData('order_label', this.goodsDetails.goods_label + '');
					task.addData('goods_id', this.goodsDetails.goods_id + '');
					task.addData('ser_id', this.goodsDetails.ser_id + '');
				}
				task.start();
			},
			uploadCompletedCB(upload,status) {
				if(status == 200) {
					this.getMsgDataAsyn({getMsgType: this.getMsgType})
				}
			},
			_hidden() {
				this.isShow = false
			},
			show() {
				this._show()
			},
			chooseImageEvent() {
				this.$refs.chooseImage.show();
			},
			/**
			 * 发送消息 
			 */
			sendMsg() {
				var opts = {
					getMsgType: this.getMsgType,
					text: this.text,
					s_type: "text"
				}
				this.text = '';
				this.sendMsgAsyn(opts)
			},
		},
		components: {
			'nav-header': NavHeader,
			'chat-type': ChatType,
			'load-more': loadMore,
			'choose-image':chooseImage
		}
	}
</script>

<style lang="scss" scoped>
	.chat-page-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
		z-index: 3000;
		.zfz-header {
			z-index: 2002;
		}
		.chat-page {
			position: absolute;
			top: 90px;
			bottom: 100px;
			width: 100%;
			padding: 0 40px;
			z-index: 1900;
			box-sizing: border-box;
		}
		.chat-foot {
			display:flex;
			justify-content:space-between;
			position:fixed;
			left:0;
			right:0;
			bottom:0;
			padding:20px 30px;
			border-top: 1px solid rgba(0,0,0,0.35);
			background-color:#fff;
			box-shadow: -6px -6px 20px 0 rgba(69, 69, 83, 0.05);
			z-index: 1901;
			.chat-foot .icon-img-btn {
				flex-shrink:0;
				width:60px;
				height:60px;
				border-radius:50%;
			}
			.chat-input-box {
				width: 100%;
				max-height: 80px;
				margin-left: 30px;
				overflow-y: visible;
				background-color: #f8f8f8;
				border-radius: 8px;
				line-height: 40px;
				padding: 16px 30px;
				font-size: 28px;
				color: #9b9b9b;
			}
			.chat-send-btn {
				flex-shrink:0;
				padding:10px 0 10px 20px;
				color:#4a4a4a;
				font-size:28px;

			}
		}

	}
</style>